<template>
    <div class="container">
        <div class="top"></div>
        <div class="form">
            <div class="tel">
                <span>手机号</span>
                <input type="text" placeholder="请输入手机号" />
            </div>
            <div class="content">
                <span>投诉内容</span>
                <textarea placeholder="请输入投诉内容"></textarea>
            </div>
        </div>
        <div class="reason" @click="set">
            <span>提交投诉审核</span><i class="iconfont icon-arrow-right"></i>
        </div>
        <a href="https://weixin110.qq.com/security/readtemplate?t=w_security_center_website/report_agreement&amp;lang=zh_CN">投诉须知</a>
    </div>
</template>

<script>
    export default {
        name: "tousu2",
        methods:{
            set:function(){
                this.$emit('set','tijiao')
            },
        }
    }
</script>

<style scoped>
    body{
        margin: 0px;
    }
    .container{
        width: 100%;
        height: 100vh;
        background: #EDEDED;
        position: relative;
    }
    .reason{
        display: flex;
        justify-content: space-between;
        padding: 8px 15px;
        margin-top: 20px;
        background: white;
    }
    .iconfont{
        font-size: 1.2rem;
    }
    .form{
        background: white;
        padding-left: 15px;
    }
    .tel{
        display: flex;
        padding: 10px 0px;
        border-bottom: 1px solid gainsboro;
    }
    .tel input,.content textarea{
        width: 230px;
        outline: none;
        border: 0;
    }
    .tel span{
        padding-right: 40px;
    }
    .content span{
        padding-right: 22px;
    }
    .content{
        padding: 10px 0px 20px;
        display: flex;
        align-items: center;
    }
    .content textarea{
        height: 60px;
    }
    .container a{
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
        text-decoration: none;
    }
    .top{
        height: 20px;
    }

</style>
